<template>
	<div v-loading="loading" style="width:960px">
		<el-button @click="toEditer(-1,null)" type='primary' size='small'>添加分类</el-button>
		<el-table :data="cateTree" :fit='false' style="width:100%;margin-top:20px" size='mini'>
			<el-table-column type="expand" width="50">
				<!-- 嵌套二级分类表 开始-->
				<template slot-scope="props">
					<div style="width:960px;margin:-20px 0px -20px -50px;">
						<el-table :data="props.row.children" :fit='false' style="width:100%" size='mini' :show-header="false">
							<el-table-column width="50" align="center">
								<template slot-scope="scope"></template>
							</el-table-column>
							<el-table-column prop='catName' label="名称" align='left' width="300"></el-table-column>
							<el-table-column label="图标" align='center' width='100'>
								<template slot-scope="scope">
									<img :src="scope.row.catIcon" style='width:25px;height:25px' />
								</template>
							</el-table-column>
							<el-table-column prop='goodsCount' label="商品数量" align='center' width="100"></el-table-column>
							<el-table-column prop='createTime' label="创建时间" align='center' width="250"></el-table-column>
							<el-table-column label="操作" align='center' width="160">
								<template slot-scope="scope">
									<el-button @click="toEditer(scope.$index,scope.row)" size='mini'>编辑</el-button>
									<el-button @click="toDelete(scope.$index,scope.row)" size='mini' type='danger'>删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</template>
				<!-- 嵌套二级分类表 结束-->
			</el-table-column>
			<el-table-column prop='catName' label="名称" align='left' width="300"></el-table-column>
			<el-table-column label="图标" align='center' width='100'>
				<template slot-scope="scope">
					<img :src="scope.row.catIcon" style='width:25px;height:25px' />
				</template>
			</el-table-column>
			<el-table-column prop='goodsCount' label="商品数量" align='center' width="100"></el-table-column>
			<el-table-column prop='createTime' label="创建时间" align='center' width="250"></el-table-column>
			<el-table-column label="操作" align='center' width="160">
				<template slot-scope="scope">
					<el-button @click="toEditer(scope.$index,scope.row)" size='mini'>编辑</el-button>
					<el-button @click="toDelete(scope.$index,scope.row)" size='mini' type='danger'>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<cateEditer :cateEditerData='cateEditerData' @edited='edited'></cateEditer>
	</div>
</template>

<script>
	import cateEditer from "@/components/category/cateEditer"

	export default {
		name: 'Category',
		data() {
			return {
				loading: true,
				cateTree: [],
				cateEditerData: {
					show: false,
					parentList: [],
					checkList: [],
					cate: {
						catId: '',
						parentId: null,
						catName: "",
						catKey: null,
						catDesc: null,
						catIcon: "",
						levelNum: 1,
						sortOrder: 0,
						status: 1,
						children: 0,
					}
				}
			}
		},
		methods: {
			//页面获取初始数据
			cateInit: function() {
				// 调用分类树
				this.$http.post(this.$store.state.url + '/category/querytree').then(
					response => {
						if(response.data.status == 200) {
							this.cateTree = response.data.data.children;
						} else {
							this.$message.error(response.data.message);
						}
						this.loading = false;
					}
				).catch();
			},
			//初始化并打开编辑器
			toEditer: function(index, row) {
				this.cateEditerData.checkList = [];
				if(row != null) {
					this.cateEditerData.cate.catId = row.catId;
					this.$http.post(this.$store.state.url + "/getcateproperty", 'catId=' + row.catId).then(
						response => {
							this.cateEditerData.checkList = response.data.data;
						}
					).catch();
				} else {
					this.cateEditerData.cate.catId = "";
				}
				this.cateEditerData.parentList = this.cateTree;
				this.cateEditerData.show = true;
			},
			//编辑保存成功后对新数据的同步显示
			edited: function(cate) {
				var list = this.cateTree;
				console.log(list)
				if(cate.levelNum == 2) {
					for(var i = 0; i < list.length; i++) {
						if(list[i].catId == cate.parentId) {
								list = list[i].children;
							break;
						}
					}
				} else if(cate.children === 0) {
					cate.children = [];
				}
				for(var i = 0; i < list.length; i++) {
					if(list[i].catId == cate.catId) {
						list[i].parentId = cate.parentId;
						list[i].catName = cate.catName;
						list[i].catIcon = cate.catIcon;
						return;
					}
				}
				list.push(cate);
			},
			//删除分类
			toDelete: function(index, row) {
				this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(
					() => {
						this.loading = true;
						var params = new URLSearchParams();
						params.append('catId', row.catId);
						this.$http.post(this.$store.state.url + '/category/delete', params).then(
							response => {
								if(response.data.status == 200) {
									this.deleted(index, row);
									this.$message({
										message: '删除成功',
										type: 'success'
									});
								} else {
									this.$message.error(response.data.message);
								}
								this.loading = false;
							}
						).catch(
							error => {
								this.$message.error('删除失败');
							}
						);
					}
				).catch(
					() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					}
				);
			},
			//数据删除后的同步更新
			deleted: function(index, cate) {
				var list = this.cateTree;
				if(cate.levelNum == 2) {
					for(var i = 0; i < list.length; i++) {
						if(list[i].catId == cate.parentId) {
							list = list[i].children;
							break;
						}
					}
				}
				for(var i = 0; i < list.length; i++) {
					if(list[i] === cate) {
						list.splice(i, 1);
						return;
					}
				}
			}
		},
		created: function() {
			// 初始化数据
			this.cateInit();
		},
		components: {
			cateEditer: cateEditer
		}
	}
</script>

<style scoped>

</style>